<template>
  <div>
    <h3>房号增加</h3>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">房号名称</td>
          <td><input type="text" v-model="info1.houseNoName" /></td>
        </tr>
        <tr>
          <td align="right">房型名称</td>
          <td>
            <select v-model="info1.houseTypeId">
              <option value="">请选择</option>
              <option :value="item.id" v-for="item in data.list">
                {{ item.houseTypeName }}
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">房态</td>
          <td>
            <select v-model="info1.houseState">
              <option value="">请选择</option>
              <option :value="1">空闲</option>
              <option :value="2">已入住</option>
              <option :value="3">已预约</option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right"></td>
          <td>
            <input
              type="button"
              value="增加"
              class="btn btn-primary"
              @click="ok"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

//房型列表需要传递参数
let info: any = reactive({
  pageIndex: 1,
  pageSize: 100,
  houseTpyeName: '',
  area1: '',
  area2: '',
});
//存储后端返回的房型列表
let data: any = reactive({
  list: [],
  totalCount: 0,
  totalPage: 0,
});

//房号增加时向后端传递的数据
let info1: any = reactive({
  houseNoName: '',
  houseTypeId: '',
  houseState: 1,
});

onMounted(() => {
  getHouseTypeList();
});

//2.增加操作
const ok = () => {
  //1.有效性判断
  if (info1.houseNoName == '') {
    alert('房号名称不能为空');
    return;
  }
  if (info1.houseTypeId == '') {
    alert('房型必选');
    return;
  }
  if (info1.houseState == '') {
    alert('房态必选');
    return;
  }
  //2.发送网络请求

  axios({
    url: '/api/HouseTypes/AddHouseNo',
    method: 'post',
    data: info1,
  })
    .then((res) => {
      console.log(res);
      if (res.data == -1) {
        alert('房号名称重复');
        return;
      }

      if (res.data > 0) {
        alert('添加成功');
        router.push('/houseNoList');
      } else {
        alert('增加失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

//1.获取房型列表
const getHouseTypeList = () => {
  axios({
    url: '/api/HouseTypes/GetHouseTypeList',
    method: 'get',
    params: info,
  })
    .then((res) => {
      console.log(res);
      Object.assign(data, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
